<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Coursity.net</title>
        <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
         <script type="text/javascript" src="js/jquery.cookie.js"></script>
        <script type="text/javascript" src="js/global.js"></script>
        <style>
            .course a{font-weight:bold; color:blue;}
            .course{margin-bottom:20px;}
            .list li{display:inline; padding-right:30px; line-height: 30px;}
            #logoutform{display:none;}
        </style>
        <script type="text/javascript">
            $(document).ready(function(){
                get_courses('upcoming');
                get_courses('last_submitted');
                get_tags('institution',3);
                get_tags('initiative',1);
                get_tags('instructor',2);
                //get_tags('course_length');
                //get_tags('estimated_effort');
                //get_tags('cloud_of_tags');
                
                
                
                $('#register').click(function(){
                    var email = $('#email').val(); if(email.length<7){alert('Please check email address.'); return;}
                    var password = $('#password').val(); if(password.length<3){alert('Please check your password.'); return;}
                    $.post('/Coursity/coursityUser/add', {email:email, password:password}, function(result){
                        if(!result.status){
                            alert(result.errorStr);
                        }
                        else{
                        	$('#loginform').hide();
                        	$('#logoutform').show();
                        } 
                    }, 'json')
                });
                
                $('#login').click(function(){
                    var email = $('#email').val(); if(email.length<7){alert('Please check email address.'); return;}
                    var password = $('#password').val(); if(password.length<3){alert('Please check your password.'); return;}
                    $.post('/Coursity/coursityUser/login', {email:email, password:password}, function(result){
                        if(!result.status){
                            alert(result.errorStr);
                        }
                        else{
                        	$.cookie("id",result.body);
                        	$.cookie("email",email);
                        	$('#loginform').hide();
                        	$('#logoutform').show();
                        } 
                    }, 'json')
                });
                $('#logout').click(function(){
                
                     	$('#loginform').show();
                     	$('#logoutform').hide();
                     	$.cookie("id","");
                    
                });
                
                /// initialize
          
                if($.cookie("id")!=null && $.cookie("id")!=''){
                	$('#loginform').hide();
                	$('#logoutform').show();
                }
                
            });
        </script>
    </head>
    <body>

        <h1>Coursity MOOC List</h1>

        <p>Welcome to Coursity which is designed to be a fine community for people interested in massive open online course (a.k.a MOOC). Please fill free to join our community, we welcome your contributions.</p>

        <div id="loginform">
            Registered Email <input id="email" type="text" value="" /> Password <input id="password" type="text" value="" /> <input id="login" type="button" value="Login" /> <input id="register" type="button" value="Register" />
        </div>
        <div id="logoutform" >
         <input id="logout" type="button" value="Logout" />
        </div>

        <hr />
        
        <h2>Upcoming Courses</h2>
        <div id="upcoming"></div>
        <hr />

        <h2>Universities / Entities</h2>
        <div id="institution" class="list"></div>
        
        <h2>Initiatives</h2>
        <div id="initiative" class="list"></div>
        
         <h2>Instructors</h2>
        <div id="instructor" class="list"></div>
        
        <h2>Cloud of Tags</h2>
        <div id="cloud_of_tags" class="list"></div>

    </body>
</html>